<template>
  <div class="quit-profile-container">
    <div class="page-header">
      <h1>🐼 戒烟档案</h1>
      <p>管理您的戒烟信息和查看戒烟成果 (◕‿◕)</p>
    </div>

    <!-- 戒烟统计卡片 -->
    <div class="stats-cards" v-if="profile">
      <div class="stat-card" :class="{ pulse: pulseAnimation.quitDays }">
        <div class="stat-icon">📅</div>
        <div class="stat-content">
          <h3>{{ animatedQuitDays }}</h3>
          <p>戒烟天数</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.quitDays">+1</div>
      </div>
      
      <div class="stat-card" :class="{ pulse: pulseAnimation.moneySaved }">
        <div class="stat-icon">💰</div>
        <div class="stat-content">
          <h3>¥{{ animatedMoneySaved }}</h3>
          <p>节省金额</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.moneySaved">✓</div>
      </div>
      
      <div class="stat-card" :class="{ pulse: pulseAnimation.cigarettesNotSmoked }">
        <div class="stat-icon">🚭</div>
        <div class="stat-content">
          <h3>{{ animatedCigarettesNotSmoked }}</h3>
          <p>未吸香烟数</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.cigarettesNotSmoked">✨</div>
      </div>
    </div>

    <!-- 档案信息 -->
    <div class="profile-section">
      <div class="section-header">
        <h2>档案信息</h2>
        <button v-if="!editing" @click="startEdit" class="edit-btn">
          编辑档案 ✏️
        </button>
      </div>

      <!-- 显示模式 -->
      <div v-if="!editing && profile" class="profile-display">
        <div class="info-grid">
          <div class="info-item">
            <label>戒烟开始日期</label>
            <span>{{ formatDate(profile.quit_date) }}</span>
          </div>
          
          <div class="info-item">
            <label>原每日吸烟量</label>
            <span>{{ profile.cigarettes_per_day }} 支/天</span>
          </div>
          
          <div class="info-item">
            <label>每包烟价格</label>
            <span>¥{{ profile.price_per_pack }}</span>
          </div>
          
          <div class="info-item">
            <label>每包烟数量</label>
            <span>{{ profile.cigarettes_per_pack }} 支/包</span>
          </div>
        </div>
        
        <div class="motivation-section">
          <label>戒烟动机</label>
          <p class="motivation-text">{{ profile.motivation || '暂无戒烟动机' }}</p>
        </div>
      </div>

      <!-- 编辑模式 -->
      <form v-if="editing" @submit.prevent="saveProfile" class="profile-form">
        <div class="form-grid">
          <div class="form-group">
            <label for="quit-date">戒烟开始日期 *</label>
            <input
              id="quit-date"
              v-model="editForm.quit_date"
              type="datetime-local"
              required
            />
          </div>
          
          <div class="form-group">
            <label for="cigarettes-per-day">原每日吸烟量 *</label>
            <input
              id="cigarettes-per-day"
              v-model.number="editForm.cigarettes_per_day"
              type="number"
              min="1"
              max="100"
              placeholder="例如：20"
              required
            />
            <span class="unit">支/天</span>
          </div>
          
          <div class="form-group">
            <label for="price-per-pack">每包烟价格 *</label>
            <input
              id="price-per-pack"
              v-model.number="editForm.price_per_pack"
              type="number"
              min="0"
              step="0.01"
              placeholder="例如：25.00"
              required
            />
            <span class="unit">元</span>
          </div>
          
          <div class="form-group">
            <label for="cigarettes-per-pack">每包烟数量</label>
            <input
              id="cigarettes-per-pack"
              v-model.number="editForm.cigarettes_per_pack"
              type="number"
              min="1"
              max="50"
              placeholder="例如：20"
            />
            <span class="unit">支/包</span>
          </div>
        </div>
        
        <div class="form-group">
          <label for="motivation">戒烟动机</label>
          <textarea
            id="motivation"
            v-model="editForm.motivation"
            rows="4"
            placeholder="请输入您的戒烟动机，这将激励您坚持下去... (◍•ᴗ•◍)❤"
          ></textarea>
        </div>
        
        <div class="form-actions">
          <button type="button" @click="cancelEdit" class="cancel-btn">
            取消 ❌
          </button>
          <button type="submit" class="save-btn" :disabled="loading">
            {{ loading ? '保存中...' : '保存 ✅' }}
          </button>
        </div>
      </form>

      <!-- 创建档案 -->
      <div v-if="!profile && !editing" class="no-profile">
        <div class="no-profile-content">
          <h3>还没有戒烟档案 📄</h3>
          <p>创建您的第一个戒烟档案，开始记录戒烟之旅吧！(◕‿◕)</p>
          <button @click="createProfile" class="create-btn">
            创建戒烟档案 ➕
          </button>
        </div>
      </div>
    </div>

    <!-- 健康改善时间轴 -->
    <div class="health-timeline" v-if="profile">
      <h2>🌱 健康改善时间轴</h2>
      <div class="timeline">
        <div 
          v-for="milestone in healthMilestones" 
          :key="milestone.time"
          :class="['timeline-item', { achieved: profile.days_quit >= milestone.days }]"
        >
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <h4>{{ milestone.title }}</h4>
            <p>{{ milestone.description }}</p>
            <span class="timeline-time">{{ milestone.time }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 可爱的卡通助手形象 -->
    <div class="cute-assistant" @click="changeAssistantMessage" :class="assistantState">
      <div class="assistant-character">🐼</div>
      <div class="assistant-message">{{ assistantMessage }}</div>
      <div class="assistant-thought" v-if="assistantState === 'thinking'">💭</div>
      <div class="assistant-celebration" v-if="assistantState === 'celebrating'">🎉</div>
      <div class="assistant-sleep" v-if="assistantState === 'sleeping'">💤</div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <!-- 成功提示 -->
    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>
  </div>
</template>

<script>
import { quitProfileApi } from '../api/index.js'

export default {
  name: 'QuitProfileView',
  data() {
    return {
      profile: null,
      editing: false,
      loading: false,
      error: '',
      successMessage: '',
      editForm: {
        quit_date: '',
        cigarettes_per_day: '',
        price_per_pack: '',
        cigarettes_per_pack: 20,
        motivation: ''
      },
      // 动画数值
      animatedQuitDays: 0,
      animatedMoneySaved: 0,
      animatedCigarettesNotSmoked: 0,
      // 脉冲动画控制
      pulseAnimation: {
        quitDays: false,
        moneySaved: false,
        cigarettesNotSmoked: false
      },
      // 助手消息
      assistantMessages: [
        '加油哦！我相信你可以的！(๑•̀ㅂ•́)و✧',
        '每一天都是新的开始！✨',
        '你已经做得很好了！(◕‿◕)',
        '坚持就是胜利！(◍•ᴗ•◍)',
        '为自己感到骄傲吧！✨',
        '小小的改变，大大的进步！(๑•̀ㅂ•́)و✧',
        '你比昨天更棒了！(◕‿◕)'
      ],
      assistantMessage: '加油哦！我相信你可以的！(๑•̀ㅂ•́)و✧',
      assistantMessageIndex: 0,
      // 助手状态
      assistantState: 'normal', // normal, thinking, celebrating, sleeping
      assistantStateTimeout: null,
      healthMilestones: [
        {
          time: '20分钟',
          days: 0,
          title: '心率和血压下降',
          description: '心率和血压开始恢复正常水平'
        },
        {
          time: '12小时',
          days: 0.5,
          title: '一氧化碳水平正常',
          description: '血液中一氧化碳水平降至正常'
        },
        {
          time: '2周',
          days: 14,
          title: '循环改善',
          description: '血液循环改善，肺功能提高'
        },
        {
          time: '1个月',
          days: 30,
          title: '呼吸改善',
          description: '咳嗽和呼吸急促减少'
        },
        {
          time: '1年',
          days: 365,
          title: '心脏病风险减半',
          description: '冠心病风险降低到吸烟者的一半'
        },
        {
          time: '5年',
          days: 1825,
          title: '中风风险降低',
          description: '中风风险降低到非吸烟者水平'
        }
      ]
    }
  },
  
  async mounted() {
    await this.loadProfile()
    // 初始化动画数值
    this.initAnimations()
    
    // 30秒后助手进入思考状态
    setTimeout(() => {
      this.assistantState = 'thinking'
    }, 30000)
  },
  
  methods: {
    async loadProfile() {
      this.loading = true
      this.error = ''
      
      try {
        // 模拟API调用
        console.log('加载戒烟档案...')
        
        // 这里是假接口，实际会调用:
        // const response = await quitProfileApi.getProfile()
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 模拟响应数据
        const mockProfile = {
          id: 1,
          user: 1,
          quit_date: '2024-09-01T09:00:00',
          cigarettes_per_day: 20,
          price_per_pack: 25.00,
          cigarettes_per_pack: 20,
          motivation: '为了健康和家人，我要戒烟！',
          days_quit: 6,
          money_saved: 7.5,
          cigarettes_not_smoked: 120,
          created_at: '2024-09-01T09:00:00',
          updated_at: '2024-09-01T09:00:00'
        }
        
        this.profile = mockProfile
        
      } catch (error) {
        console.error('加载档案失败:', error)
        if (error.response?.status === 404) {
          // 档案不存在
          this.profile = null
        } else {
          this.error = '加载档案失败，请稍后重试'
        }
      } finally {
        this.loading = false
      }
    },
    
    // 初始化动画数值
    initAnimations() {
      if (this.profile) {
        this.animateValue('animatedQuitDays', 0, this.profile.days_quit, 1000)
        this.animateValue('animatedMoneySaved', 0, this.profile.money_saved, 1500)
        this.animateValue('animatedCigarettesNotSmoked', 0, this.profile.cigarettes_not_smoked, 1200)
      }
    },
    
    // 数字滚动动画
    animateValue(dataProperty, start, end, duration) {
      let startTimestamp = null
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp
        const progress = Math.min((timestamp - startTimestamp) / duration, 1)
        const value = Math.floor(progress * (end - start) + start)
        this[dataProperty] = value
        if (progress < 1) {
          window.requestAnimationFrame(step)
        } else {
          // 确保最终值精确
          this[dataProperty] = typeof end === 'number' && end % 1 !== 0 ? end.toFixed(1) : end
          // 触发脉冲动画
          this.triggerPulseAnimation(dataProperty)
        }
      }
      window.requestAnimationFrame(step)
    },
    
    // 触发脉冲动画
    triggerPulseAnimation(property) {
      const mapping = {
        'animatedQuitDays': 'quitDays',
        'animatedMoneySaved': 'moneySaved',
        'animatedCigarettesNotSmoked': 'cigarettesNotSmoked'
      }
      
      const key = mapping[property]
      if (key) {
        this.pulseAnimation[key] = true
        setTimeout(() => {
          this.pulseAnimation[key] = false
        }, 1000)
      }
    },
    
    createProfile() {
      this.editing = true
      this.editForm = {
        quit_date: new Date().toISOString().slice(0, 16),
        cigarettes_per_day: '',
        price_per_pack: '',
        cigarettes_per_pack: 20,
        motivation: ''
      }
    },
    
    startEdit() {
      this.editing = true
      this.editForm = {
        quit_date: this.profile.quit_date.slice(0, 16),
        cigarettes_per_day: this.profile.cigarettes_per_day,
        price_per_pack: this.profile.price_per_pack,
        cigarettes_per_pack: this.profile.cigarettes_per_pack,
        motivation: this.profile.motivation || ''
      }
    },
    
    cancelEdit() {
      this.editing = false
      this.error = ''
    },
    
    async saveProfile() {
      this.loading = true
      this.error = ''
      this.successMessage = ''
      
      try {
        console.log('保存档案:', this.editForm)
        
        // 这里是假接口，实际会调用:
        // if (this.profile) {
        //   await quitProfileApi.updateProfile(this.editForm)
        // } else {
        //   await quitProfileApi.createProfile(this.editForm)
        // }
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 更新本地数据
        if (this.profile) {
          this.profile = { ...this.profile, ...this.editForm }
        } else {
          this.profile = {
            id: 1,
            user: 1,
            ...this.editForm,
            days_quit: 0,
            money_saved: 0,
            cigarettes_not_smoked: 0,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString()
          }
        }
        
        this.editing = false
        this.successMessage = '档案保存成功！(๑•̀ㅂ•́)و✧'
        
        // 重新初始化动画
        this.initAnimations()
        
        // 触发庆祝动画
        this.assistantState = 'celebrating'
        setTimeout(() => {
          this.assistantState = 'normal'
        }, 2000)
        
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
        
      } catch (error) {
        console.error('保存档案失败:', error)
        this.error = '保存失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    // 切换助手消息
    changeAssistantMessage() {
      // 清除之前的定时器
      if (this.assistantStateTimeout) {
        clearTimeout(this.assistantStateTimeout)
      }
      
      // 触发点击动画
      this.assistantState = 'clicked'
      setTimeout(() => {
        this.assistantState = 'normal'
      }, 300)
      
      this.assistantMessageIndex = (this.assistantMessageIndex + 1) % this.assistantMessages.length
      this.assistantMessage = this.assistantMessages[this.assistantMessageIndex]
      
      // 5秒后进入睡眠状态
      this.assistantStateTimeout = setTimeout(() => {
        this.assistantState = 'sleeping'
      }, 5000)
    }
  },
  
  beforeUnmount() {
    if (this.assistantStateTimeout) {
      clearTimeout(this.assistantStateTimeout)
    }
  }
}
</script>

<style scoped>
.quit-profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 背景装饰元素 */
.quit-profile-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.quit-profile-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
}

.stat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border: 2px solid #FFD1DC;
}

.stat-card.primary::after {
  background: linear-gradient(90deg, #FFC6FF, #FFD1DC);
}

.stat-card.success {
  border: 2px solid #B4F8C8;
}

.stat-card.success::after {
  background: linear-gradient(90deg, #B4F8C8, #FFC6FF);
}

.stat-card.warning {
  border: 2px solid #FFAFCC;
}

.stat-card.warning::after {
  background: linear-gradient(90deg, #FFAFCC, #FFD1DC);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 2px solid #A2D2FF;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(162, 210, 255, 0.3);
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 5px 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  animation: bounce 1s ease-in-out;
}

.stat-content p {
  color: #888888;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.profile-section {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.2s;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-header h2 {
  color: #444444;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.edit-btn {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform-origin: center;
}

.edit-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #90C0EE 0%, #BCA2CB 100%);
}

.edit-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item label {
  font-weight: 500;
  color: #444444;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.info-item span {
  color: #888888;
  font-size: 16px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.motivation-section {
  margin-top: 25px;
}

.motivation-section label {
  display: block;
  font-weight: 500;
  color: #444444;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.motivation-text {
  background: rgba(240, 248, 255, 0.5);
  padding: 15px;
  border-radius: 15px;
  color: #888888;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  border: 1px dashed #CDB4DB;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  font-weight: 500;
  color: #444444;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 2px solid #B0D0FF;
  border-radius: 15px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.9);
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #5A8DEE;
  box-shadow: 0 0 0 3px rgba(90, 141, 238, 0.2);
}

.unit {
  position: absolute;
  right: 12px;
  top: 36px;
  color: #999;
  font-size: 14px;
  pointer-events: none;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
}

.cancel-btn {
  background: linear-gradient(135deg, #E0E0E0 0%, #F5F5F5 100%);
  color: #666;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform-origin: center;
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #D0D0D0 0%, #E5E5E5 100%);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.cancel-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

.save-btn {
  background: linear-gradient(135deg, #B4F8C8 0%, #A2D2FF 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform-origin: center;
}

.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #A4E8B8 0%, #92C2EF 100%);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.save-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.save-btn:active:not(:disabled) {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

.no-profile {
  text-align: center;
  padding: 60px 20px;
  background: rgba(240, 244, 255, 0.5);
  border-radius: 20px;
  border: 2px dashed #CDB4DB;
}

.no-profile-content h3 {
  color: #444444;
  margin-bottom: 15px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.no-profile-content p {
  color: #888888;
  margin-bottom: 25px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.create-btn {
  background: linear-gradient(135deg, #FFD1DC 0%, #B4F8C8 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform-origin: center;
}

.create-btn:hover {
  background: linear-gradient(135deg, #FDC0CC 0%, #A4E8B8 100%);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.create-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

.health-timeline {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.4s;
}

.health-timeline h2 {
  color: #444444;
  margin-bottom: 25px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #A2D2FF, #FFD1DC, #B4F8C8);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 40px;
}

.timeline-dot {
  position: absolute;
  left: -25px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A2D2FF 0%, #FFD1DC 100%);
  border: 3px solid white;
  box-shadow: 0 0 0 2px #A2D2FF;
}

.timeline-item.achieved .timeline-dot {
  background: linear-gradient(135deg, #B4F8C8 0%, #A2D2FF 100%);
  box-shadow: 0 0 0 2px #B4F8C8;
}

.timeline-content h4 {
  color: #444444;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.timeline-content p {
  color: #888888;
  margin-bottom: 5px;
  line-height: 1.5;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.timeline-time {
  color: #B4F8C8;
  font-size: 12px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.timeline-item.achieved .timeline-content h4 {
  color: #28a745;
}

.error-message {
  background: #fff0f0;
  color: #c33;
  padding: 15px;
  border-radius: 15px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #fcc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.success-message {
  background: #f0fff0;
  color: #393;
  padding: 15px;
  border-radius: 15px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #cfc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 可爱的卡通助手形象 */
.cute-assistant {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: slideInUp 1s ease-out;
}

.assistant-character {
  font-size: 48px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.cute-assistant.normal .assistant-character {
  animation: float 3s ease-in-out infinite;
}

.cute-assistant.clicked .assistant-character {
  animation: spin 0.5s ease;
}

.cute-assistant.thinking .assistant-character {
  animation: none;
}

.cute-assistant.celebrating .assistant-character {
  animation: bounce 1s ease infinite;
}

.cute-assistant.sleeping .assistant-character {
  animation: none;
  opacity: 0.7;
}

.assistant-message {
  background: white;
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 14px;
  color: #444444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #FFD1DC;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  font-weight: 400;
  position: relative;
  max-width: 200px;
  text-align: center;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease;
}

.assistant-message::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #FFD1DC transparent transparent;
}

.assistant-thought,
.assistant-celebration,
.assistant-sleep {
  position: absolute;
  font-size: 24px;
  animation: float 2s ease-in-out infinite;
}

.assistant-thought {
  top: -30px;
  right: -10px;
}

.assistant-celebration {
  top: -40px;
  right: -20px;
  animation: bounce 1s ease infinite;
}

.assistant-sleep {
  top: -20px;
  left: -10px;
}

/* 闪烁动画 */
.sparkle {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  animation: sparkle 1s ease-out;
}

/* 动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 数字变化弹跳效果 */
.stat-content h3 {
  animation: bounce 1s ease-in-out;
}

/* 脉冲动画 */
.stat-card.pulse {
  animation: pulse 1s ease;
}

/* 闪烁动画 */
@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .quit-profile-container {
    padding: 15px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .info-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .cute-assistant {
    bottom: 20px;
    right: 20px;
    transform: scale(0.8);
  }
}
</style>